<template>
  <div class="pageTop bodycontent clear">
    <div class="pageLogo">
      <img src="../assets/img/five-logo.jpg" alt />
    </div>
    <p><span :class="{fontColor:colorNum==1}">我的购物车</span><em>></em><span :class="{fontColor:colorNum==2}">确认订单信息</span><em>></em><span :class="{fontColor:colorNum==3}">订单提交成功</span></p>
  </div>
</template>
<script>
export default {
  props:{
    colorNum:Number,
    // color1:blur,
    // color2:blur,
    // color3:blur,
  },
  data(){
    return {
      // fontColor1:{
      //   fontColor:this.$props.color1,
      // },
      // fontColor2:{
      //   fontColor:this.$props.color2,
      // },
      // fontColor3:{
      //   fontColor:this.$props.color3,
      // },
    }
  },
  created(){
    // window.console.log(typeof this.$props.color1);
    // window.console.log(this.fontColor2);
    // window.console.log(this.fontColor3);
  }
};
</script>
<style>
.pageTop {
  position: relative;
  margin-bottom: 38px;
}
.pageLogo {
  width: 28.9063%;
  float: left;
  padding-top: 25px;
}
.pageLogo img {
  width: 100%;
}
.pageTop p{
  position: absolute;
  right: 0;
  bottom: 0;
}
.pageTop span,.pageTop em{
  float: left;
  margin-left: 38px;
}
.pageTop em{
  color: #a2a2a2;
}
.fontColor{
  color:#f08200;
}
</style>